<template>
	<!-- 秒杀 -->
	<div class="component-item">
		<div class="seckill-div"
			 :style="{'background': item.bgColor, 'margin-top': item.pageMargin + 'px'}">
			<div class="seckill-box"
				 :style="{'border-radius': item.bgStyle == 'circle' ? '10px' : '0px', 'margin': '0px ' + item.bgMargin + 'px'}">
				<div class="title">
					<div class="left">
						<img :src="domain + '/static/admin/default/image/spike-icon-002.gif'" alt="">
						<p>限时秒杀</p>
						<div class="time">
							<span style="background: rgba(252, 60, 62, 0.09); color: rgb(233, 51, 35);">{{ timer.hour }}</span><em>:</em>
							<span style="background: rgba(252, 60, 62, 0.09); color: rgb(233, 51, 35);">{{ timer.minute }}</span><em>:</em>
							<span style="background: rgba(252, 60, 62, 0.09); color: rgb(233, 51, 35);">{{ timer.seconds }}</span>
						</div>
					</div>
					<div class="right" @click="moreSeckill()" >更多</div>
				</div>
				<div class="seckill-list">
					<div class="seckill-item" v-for="item2 in seckillList" :key="item2.id" @click="navToSeckillDetailPage(item2)">
						<div class="img-box">
							<div class="empty-img-box">
								<img :src="item2.pic"/>
							</div>
						</div>
						<div class="seckill-title"
							 :style="{'font-size': item.fontSize + 'px', 'color': item.fontColor}"
							 v-if="item.show_title == 1">{{ item2.name }}
						</div>
						<div class="price" v-if="item.show_price == 1">
							<span class="label" style="background: rgb(233, 51, 35);">抢</span>
							<span class="num-label" style="color: rgb(233, 51, 35);">￥</span>
							<span class="num" style="color: rgb(233, 51, 35);">{{ item2.seckill_price }}</span>
						</div>
					</div>
	
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: "seckill",
		props: {
			item: {
				type: Object,
				default() {
					return {}
				}
			},
			domain: {
				type: String,
				default: ""
			}
		},
		data() {
			return {
				seckillList: [],
				seckillHour: 0,
				timer: {
					hour: 0,
					minute: 0,
					seconds: 0
				},
			}
		},
		onShow() {
			this.timeShow()
		},
		mounted() {
			this.getSeckillList()
		},
		methods: {
			// 秒杀商品详情
			navToSeckillDetailPage(item) {
				uni.navigateTo({
					url: '/pages/seckill/product?id=' + item.id
				})
			},
			// 获取秒杀列表
			async getSeckillList() {
				let res = await this.$api.home.getSeckillList.get()
				this.seckillList = res.data.seckillList
				this.seckillHour = res.data.seckillHour
			},
			// 更多的秒杀商品
			moreSeckill() {
				uni.navigateTo({
					url: `/pages/seckill/index`
				})
			},
			// 当前时间
			timeShow() {
				var t = null;
				let self = this
				t = setTimeout(time, 1000); //开始运行
				function time() {
				  clearTimeout(t);  // 清除定时器
				  let dt = new Date();
					
				  self.timer.hour = (dt.getHours() < 10) ? '0' + dt.getHours() : dt.getHours()
				  self.timer.minute = (dt.getMinutes() < 10) ? '0' + dt.getMinutes() : dt.getMinutes()
				  self.timer.seconds = (dt.getSeconds() < 10) ? '0' + dt.getSeconds() : dt.getSeconds()
				  
				  t = setTimeout(time, 1000); //设置定时器，循环运行
				}
			},
		}
	}
</script>

<style scoped>
.seckill-div {
    width: 100%;
    height: 240px;
}
.seckill-div .seckill-box {
    padding: 15px 10px;
    background: #fff;
}
.seckill-box .title {
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    width: 100%;
}
.seckill-box .title .left {
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
.seckill-box .left img {
    width: 18px;
    height: 18px;
    margin-right: 5px;
    border-radius: 50%;
}
.seckill-box .left p {
    font-size: 16px;
    color: #282828;
    font-weight: 600;
}
.seckill-box .left .time {
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-left: 5px;
    color: #f44;
}
.seckill-box .left .time span {
    width: 20px;
    height: 16px;
    font-size: 12px;
    text-align: center;
    line-height: 16px;
}
.seckill-box  .left .time em {
    font-size: 12px;
    margin: 0 3px;
    font-style: normal;
    font-weight: 700;
}
.seckill-box .right {
    font-size: 14px;
    color: #999;
}
.seckill-box .seckill-list {
    display: flex;
    margin-top: 8px;
    overflow: hidden;
}
.seckill-list .seckill-item {
    flex-shrink: 0;
    width: 30%;
    background-color: #fff;
    margin-right: 18px;
}
.seckill-item .img-box {
    position: relative;
    width: 100%;
    height: 110px;
}
.seckill-item .seckill-title {
    margin-top: 5px;
    font-size: 13px;
    color: #282828;
    padding: 0 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.seckill-item .price {
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 0 3px;
}
.seckill-item .price .label {
    font-size: 9px;
    width: 16px;
    height: 16px;
    color: #fff;
    text-align: center;
    line-height: 16px;
}
.seckill-item .price .num-label {
    color: #f44;
    font-size: 24rpx;
    font-weight: 600;
    margin: 1px 2px 0;
}
.seckill-item .price .num {
    color: #f44;
    font-size: 32rpx;
    font-weight: 600;
}
.img-box img {
	width: 100%;
	height: 100%;
	display: block;
	max-width: 100%;
	object-fit: contain;
}
</style>